<template>
    <el-container class="page">
        <el-aside class="aside" width="200px" :class="{ togglemenu: isCollapse}">
            <div class="logo">{{!isCollapse ? 'Vue3-TypeScript' : 'Vue3'}}</div>
            <el-menu router :default-active="route.path" class="el-menu-vertical-demo" background-color="#001529" active-text-color="#ffffff" :uniqueOpened="true" :collapse="isCollapse">
                <template v-for="item in router.options.routes[0].children">
                    <el-submenu :index="item.path" v-if="item.children" :key="item.path">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">{{child.name}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item :index="item.path" v-else :key="item.path">
                        <i :class="item.icon"></i>
                        <template #title>{{item.name}}</template>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="nav-header">
                <span class="el-icon-s-fold toggle" @click="isCollapse = !isCollapse"></span>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{item.name}}</el-breadcrumb-item>
                </el-breadcrumb>

            </el-header>
            <el-main>
                <router-view class="router" v-slot="{ Component }">
                    <transition name="fade-transform" mode="out-in">
                        <component :is="Component" />
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
    setup () {
        const router = useRouter()
        const route = useRoute()
        const data:any = reactive({
            isCollapse: false,
            breadList: []
        })
        onMounted(() => {
            let matched = route.matched;
            data.breadList = matched;
        })
        watch(() => route.matched,(newVal, oldVal) => {
            let matched = newVal;
            data.breadList = matched;
            // databreadList = matched;
            console.log(data);
        })
        return {
            ...toRefs(data),
            router,
            route
        } 
    }
}
</script>

<style lang="scss" scoped>
.toggle {
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
}
.togglemenu {
    width: 64px !important;
}
.nav-header {
    line-height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d6dade;
}
.logo {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background-color: #000c17;
}
</style>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.aside {
    background-color: #001529;
    transition: ease-in 0.1s;
    -moz-transition: ease-in 0.1s; /* Firefox 4 */
    -webkit-transition: ease-in 0.1s; /* Safari and Chrome */
    -o-transition: ease-in 0.1s; /* Opera */
}
.el-menu {
    border-right: 0px;
}
.el-submenu {
    .el-menu-item {
        background-color: #000c17 !important;
        padding-left: 50px !important;
    }
}
.el-submenu__title,.el-menu-item {
    color: hsla(0,0%,100%,.65);
}
.el-menu-item.is-active {
    background-color: #001529!important;
}
.el-submenu__title, .el-menu-item {
    height: 50px !important;
    line-height: 50px;
}
.el-menu-item [class^=el-icon-] {
    vertical-align: text-top;
}
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>